<template>
    <div class="text-20 p-24">
        <PageHeader title="等级分析"/>
        <!-- 顶部会员等级分布 -->
        <div class="member-level-head echarts-box flex-col-box">
            <div class="text-18 font-600 text-t-default flex w-full'">会员等级人数分布</div>
            <div class="mt-24 flex">
                <div
                    class="level-container card-style mr-24 flex-between-box flex-col"
                    v-for="item in levelNumList"
                    :key="item.id"
                >
                    <div class="text-18">{{ MemberLevelEnum[item.levelType] }}会员</div>
                    <div class="flex-between-box w-full items-end">
                        <span class="text-16">会员总数</span>
                        <span class="text-22">{{ item.levelNum }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 数据内容 -->
        <div class="flex-between-box w-full flex-1">
            <div class="level-content">
                <div class="flex-between-box">
                    <div class="echarts-box level-proportion">
                        <EChartsContainer title="会员等级占比" :options="levelPropOptions" id="levelPropECharts"/>
                    </div>
                    <div class="echarts-box level-proportion">
                        <EChartsContainer title="会员等级性别占比" id="levelSexECharts" :options="levelSexOptions">
                            <template #title>
                                <div class="select-box">
                                    <el-select v-model="levelValue" placeholder="Select" size="small">
                                        <el-option
                                            v-for="item in levelOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </div>
                            </template>
                        </EChartsContainer>
                    </div>
                </div>
                <div class="mt-24 echarts-box level-increment">
                    <EChartsContainer title="会员等级增量变化" :options="levelIncrementOptions" id="levelIncrementECharts"/>
                </div>
            </div>
            <div class="level-content echarts-box box-border level-age">
                <EChartsContainer title="不同年龄会员等级人数对比" :options="levelAgeOptions" id="levelAgeECharts"/>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import PageHeader from '@/components/PageHeader/index.vue'
import EChartsContainer from '@/components/EChartsContainer/index.vue'
import { MemberLevelEnum } from '@/api/module/memberManage'
import { ref } from 'vue'
import dayjs from 'dayjs'

const levelNumList = [
    {
        id: 1,
        levelType: 1,
        levelNum: 94
    },
    {
        id: 2,
        levelType: 2,
        levelNum: 12
    },
    {
        id: 3,
        levelType: 3,
        levelNum: 8
    },
    {
        id: 4,
        levelType: 4,
        levelNum: 3
    },
    {
        id: 5,
        levelType: 5,
        levelNum: 2
    }
]

const levelValue = 1
const levelOptions = [
    {
        value: 1,
        label: '花朝铜卡'
    },
    {
        value: 2,
        label: '桐夏银卡'
    }
]

// 会员等级占比
const levelPropOptions = ref({})
// 会员等级性别分布
const levelSexOptions = ref({})
// 会员等级增量变化
const levelIncrementOptions = ref({})
// 不同年龄会员等级人数对比
const levelAgeOptions = ref({})
setTimeout(() => {
    /**
     * 会员等级占比
     * */
    const levelPropName: Record<string, string | number>[] = [
        { name: '花朝铜卡' },
        { name: '桐夏银卡' },
        { name: '兰秋金卡' },
        { name: '霜华黑卡' },
        { name: '谷雨钻卡' }
    ]
    const levelPropData = [23837, 17652, 11520, 9675, 6722]
    levelPropName.forEach((item, index) => {
        item.value = levelPropData[index]
    })
    levelPropOptions.value = {
        // 提示框
        tooltip: {
            trigger: 'item',
            // 格式化提示值
            valueFormatter(value: number) {
                return `${((value * 100) / 103411).toFixed(2)}%`
            }
        },
        series: [
            {
                name: '等级占比',
                // 饼图
                type: 'pie',
                // 中间圆的大小、整体圆的大小
                radius: [45, 100],
                // 距离左端和上端的位置
                center: ['50%', '50%'],
                // 展示模式 - 扇形圆心角展现 radius
                // 每一段扇形的圆角
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#FFF',
                    borderWidth: 5
                },
                data: levelPropName
            }
        ]
    }
    /**
     * 会员等级性别占比
     * */
    levelSexOptions.value = {
        tooltip: {
            trigger: 'item',
            valueFormatter(value: number) {
                return `${value}人 ${((value * 100) / 100).toFixed(0)}%`
            }
        },
        // 设置数据说明的垂直水平位置
        legend: {
            top: '6%',
            left: 'center'
        },
        // 数据填充色
        color: ['#A3D0E9', '#E6779F'],
        series: [
            {
                type: 'pie',
                // 组件上边距
                top: '10%',
                name: '人数占比',
                // 饼图内外边距
                radius: ['0', '80%'],
                // 图形样式 - 图形边框
                itemStyle: {
                    borderRadius: 8,
                    borderColor: '#FFF',
                    borderWidth: 8
                },
                // 饼图文本标签
                label: {
                    // 是否展示文本标签
                    show: false
                },
                data: [
                    { value: 35, name: '男' },
                    { value: 65, name: '女' }
                ]
            }
        ]
    }
    /**
     * 会员等级增量变化
     * */
    // 近 7 日日期
    const sevenDay = []
    for (let day = 0; day <= 6; day++) {
        sevenDay.push(dayjs().subtract(day, 'day').format('MM-DD'))
    }
    levelIncrementOptions.value = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '4%',
            data: ['花朝铜卡', '桐夏银卡', '兰秋金卡', '霜华黑卡', '谷雨钻卡']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: sevenDay
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '花朝铜卡',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '桐夏银卡',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '兰秋金卡',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '霜华黑卡',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '谷雨钻卡',
                type: 'line',
                stack: 'Total',
                data: [520, 632, 501, 734, 690, 530, 620]
            }
        ]
    }
    /**
     * 不同年龄会员等级人数对比
     * */
    levelAgeOptions.value = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            top: '3%'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['40岁以上', '36-40岁', '31-35岁', '26-30岁', '20-25岁', '20岁以下']
        },
        series: [
            {
                name: '花朝铜卡',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 620230]
            },
            {
                name: '桐夏银卡',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 541807]
            },
            {
                name: '兰秋金卡',
                type: 'bar',
                data: [18325, 21438, 29000, 101594, 114141, 451807]
            },
            {
                name: '霜华黑卡',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            },
            {
                name: '谷雨钻卡',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    }
}, 500)
</script>

<style lang="less" scoped>
.member-level-head {
    align-items: flex-start;
    margin-top: 0;

    .level-container{
        width: 225px;
        height: 155px;
        border: 1px solid lightgray;
    }
}

.level-content{
    width: calc((100% - 24px) / 2);

    .level-proportion{
        width: calc(50% - 12px);
        height: 370px;
    }

    .level-increment{
        height: 420px;
    }

    .select-box{
        width: 90px;
        height: 30px;
    }
}

.level-age{
    height: 816px;
}
</style>
